import React from 'react'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import { getTokenApi } from '../api/user'
import { useNavigate } from 'react-router-dom'
function Login() {
  let nav = useNavigate()
  const onFinish = async (values) => {
    const { data: res } = await getTokenApi(values)
    console.log(res);
    localStorage.setItem('token', res.token)
    localStorage.setItem('avatar', res.avatar)
    localStorage.setItem('username', res.username)
    nav('/my')
    alert('登录成功')
  }
  return (
    <div>
      <h1>登录您的12306账号</h1>
      <div style={{ paddingTop: '50px' }}>
        有列车高铁承诺保证您的账号几个人信息的安全，接不提供给第三方，绑定既视为同意《免责与隐私申明》
      </div>
      <div style={{ paddingTop: '100px' }}>
        <Form
          onFinish={onFinish}
          layout='horizontal'
          footer={
            <Button block type='submit' style={{ backgroundColor: '#B8B8B8', color: '#fff' }} size='large'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='username'
            label=''
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='password'
            label=''
            rules={[{ required: true, message: '密码不能为空' },
            ]}
          >
            <Input onChange={console.log} placeholder='请输入密码' />
          </Form.Item>
        </Form>
      </div>
      <div style={{ textAlign: 'center', paddingTop: '500px' }}><p>使用非常准预定</p>
        <p>免账号出票</p>
      </div>
    </div>
  )
}

export default Login
